<!--<template>-->
<!--  <el-aside width="200px">-->
<!--    <el-scrollbar>-->
<!--      <el-menu-->
<!--          :default-active="route.fullPath"-->
<!--          class="el-menu-vertical-demo"-->
<!--          style="height: 100vh;"-->
<!--          :router="true"-->
<!--      >-->
<!--        <template v-for="data in datalist" :key="data.path">-->
<!--          <el-sub-menu v-if="data.children && data.children.length" :index="data.path">-->
<!--            <template #title>-->
<!--              <el-icon :component="getIconComponent(data.icon)" />-->
<!--              <span>{{ data.title }}</span>-->
<!--            </template>-->
<!--            <el-menu-item-->
<!--                :index="item.path"-->
<!--                v-for="item in data.children"-->
<!--                :key="item.path"-->
<!--            >-->
<!--              <el-icon :component="getIconComponent(item.icon)" />-->
<!--              <span>{{ item.title }}</span>-->
<!--            </el-menu-item>-->
<!--          </el-sub-menu>-->

<!--          <el-menu-item :index="data.path" v-else>-->
<!--            <el-icon :component="getIconComponent(data.icon)" />-->
<!--            <span>{{ data.title }}</span>-->
<!--          </el-menu-item>-->
<!--        </template>-->
<!--      </el-menu>-->
<!--    </el-scrollbar>-->
<!--  </el-aside>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, onMounted } from 'vue';-->
<!--import axios from 'axios';-->
<!--import { useRoute } from 'vue-router';-->
<!--import * as ElementPlusIconsVue from '@element-plus/icons-vue';-->

<!--const route = useRoute();-->
<!--const datalist = ref([]);-->

<!--const getIconComponent = (iconName) => {-->
<!--  return ElementPlusIconsVue[iconName] || ElementPlusIconsVue.Setting;-->
<!--};-->

<!--const getList = async () => {-->
<!--  try {-->
<!--    const res = await axios.get('http://localhost:8000/adminapi/rights');-->
<!--    if (res.data) {-->
<!--      datalist.value = res.data;-->
<!--    } else {-->
<!--      console.error('No data received');-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('Error fetching data:', error);-->
<!--  }-->
<!--};-->

<!--onMounted(() => {-->
<!--  getList();-->
<!--});-->
<!--</script>-->

<template>
  <el-aside width="200px">
        <el-scrollbar>
        <el-menu
        :default-active="route.fullPath"
class="el-menu-vertical-demo"
style="height: 100vh;"
        :router="true"
        >
        <!-- 菜单渲染核心逻辑 -->
        <template v-for="menu in filteredMenuList" :key="menu.path">
          <!-- 父级菜单（有子菜单） -->
          <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.path">
            <template #title>
              <el-icon :component="getIconComponent(menu.icon)" />
<span>{{ menu.title }}</span>
            </template>
            <!-- 子菜单 -->
            <el-menu-item
              :index="subMenu.path"
v-for="subMenu in menu.children"
        :key="subMenu.path"
        >
              <el-icon :component="getIconComponent(subMenu.icon)" />
<span>{{ subMenu.title }}</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 叶子菜单（无子菜单） -->
          <el-menu-item :index="menu.path" v-else>
            <el-icon :component="getIconComponent(menu.icon)" />
<span>{{ menu.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
        import axios from 'axios';
        import { useRoute } from 'vue-router';
        import * as ElementPlusIconsVue from '@element-plus/icons-vue';

// 1. 基础变量
        const route = useRoute();
const datalist = ref([]); // 原始菜单数据
const userInfo = JSON.parse(sessionStorage.getItem("userInfo")) || {}; // 从sessionStorage取用户信息
        const roleType = userInfo?.role?.roleType || 0; // 默认角色（0代表未登录/无角色）

// 2. 图标映射函数
        const getIconComponent = (iconName) => {
        return ElementPlusIconsVue[iconName] || ElementPlusIconsVue.Setting;
};

// 3. 核心：按角色过滤菜单（抽离为computed，响应式更新）
        const filteredMenuList = computed(() => {
        // 定义需要隐藏的父级菜单标题（与数据库/后端返回的title严格一致）
        const HIDDEN_PARENT_TITLE = "用户管理";

        return datalist.value.filter(menu => {
    // 逻辑1：学生角色（roleType=2）隐藏“用户管理”及其子菜单
    if (roleType === 2 && menu.title === HIDDEN_PARENT_TITLE) {
        return false; // 直接过滤掉该菜单
    }
    // 逻辑2：其他角色正常显示（可扩展更多角色逻辑）
    return true;
});
        });

// 4. 异步获取菜单数据
        const getList = async () => {
        try {
        const res = await axios.get('http://localhost:8000/adminapi/rights');
    if (res.data) {
datalist.value = res.data; // 先存原始数据
    } else {
            console.error('接口返回空数据');
    }
            } catch (error) {
        console.error('获取菜单失败:', error);
  }
          };

// 5. 组件挂载时执行
onMounted(() => {
getList();
});
</script>

<style scoped>
/* 可自定义菜单样式 */
.el-menu-vertical-demo {
    border-right: none; /* 隐藏右侧边框，与布局融合 */
}
</style>